<template>
  <div class="articles">
    <!-- 文章内容 -->
    <div class="showArticle-content">
      <div class="left-content">
          <!-- 无信息时显示 -->
        <div v-if="articleData.length ==0">
          <el-empty :image-size="300" description="您暂未发布博文"></el-empty>
        </div>
        <div class="block" v-if="articleData.length !=0" >
          <el-timeline>
            <el-timeline-item color="#2882c5" icon="el-icon-loading" :timestamp="item.artTime" placement="top" v-for="(item,index) in articleData" :key="index">
              <el-card class="animate__animated animate__bounce">
                <h4>{{item.artTitle}}</h4>
                <p>{{item.user.userNickname}} 提交于 {{item.artTime}}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <!-- 右边信息 -->
      <div class="right-content">
        <div class="right-write-info">
          <WriteInfo></WriteInfo>
        </div>
        <div class="weather-info" style="width: 100%; margin-top: 25px">
          <Weather></Weather>
        </div>
        <div class="paihangbang" style="width: 100%; margin-top: 25px">
          <Rank></Rank>
        </div>
        <div class="tagcloud" style="width: 100%; margin-top: 25px">
          <Tagcloud></Tagcloud>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WriteInfo from "../rotation/writeinfo.vue";
import Weather from "../weacher/weacher.vue";
import Rank from "../ranking/ranking.vue";
import Tagcloud from "@/components/tagcloud/tagcloud.vue";
import axios from "axios";
import pubsub from "pubsub-js";
export default {
  name: "ShowArticlejiagou",
  components: {
    WriteInfo,
    Weather,
    Rank,
    Tagcloud,
  },
  data() {
    return {
      articleData: [],
      userId:this.$store.state.user
    };
  },
  mounted() {
    this.getUserArticle()
  },
  methods: {
    //获取用户的博文信息
    getUserArticle(){
        if(this.userId == 0 || this.userId == "" || this.userId == null){
            this.open4("请先登录")
        }else{
          //发送请求查询博文信息
          const that = this
          axios({
            method:"post",
            url:"/aabbcc/article/selectByUserIdArticle",
            params:{
              userId:that.userId
            }
          }).then(function(res){
              console.log(res);
              if(res.data.code == 200){
                  that.open2(res.data.massage)
                  that.articleData = res.data.obj
              }else{
                that.open4(res.data.massage)
              }
          })
        }
    },
    open4(message) {
      //错误提示框
      this.$message({
        showClose: true,
        message: message,
        type: "error",
      });
    },
    open2(message) {
      //成功提示框
      this.$message({
        showClose: true,
        message: message,
        type: "success",
      });
    },
  },
};
</script>

<style scoped>
/* 时间线 */
.block{
      width: 80%;
    margin-left: 50px;
    margin-top: 40px;
}
/* 右边展示信息 */
.right-write-info {
  width: 100%;
  border-bottom: 1px solid #ebeef5;
  position: relative;
}
.infoicon {
  color: rgb(108, 110, 114);
}

.tagcloud {
  background: #fff;
  border-radius: 10px;
}
.articles {
  width: 100%;
  height: 100%;
  position: relative;
  /* top: -107px; */
}
.showArticle-content {
  width: 78.9%;
  border-radius: 10px;
  margin: 0 auto;
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}

.showArticle-content .left-content {
  width: 80%;
  height: 100%;
  background: #fff;
  border-radius: 10px;
}

.showArticle-content .right-content {
  width: 19%;
  border-radius: 10px;
}
</style>